/**
 * Created by Quanta on 2017/5/23.
 */
import React from "react";
import ReactDOM from "react-dom";
import Header from "./pluses/header";
import Jumbotron from "react-bootstrap/lib/Jumbotron";
import Grid from "react-bootstrap/lib/Grid";
import Row from "react-bootstrap/lib/Row";
import Col from "react-bootstrap/lib/Col";
import Media from "./pluses/media";
import ListGroup from "react-bootstrap/lib/ListGroup";
import ListGroupItem from "react-bootstrap/lib/ListGroupItem";

ReactDOM.render(
    <Header />,
    document.getElementById('header')
);

class Main extends React.Component {
    listItemClick(target){
        var test =  document.getElementsByClassName('list-group-item');
        for(var i = 0;i<test.length;i++){
            var className = test[i].className;
            test[i].className = className.split(' ')[0]
        }
        target.target.className += ' active';
    }
    render(){
        return (
            <Grid>
                <Row className="show-grid">
                    <Col lg={12} xs={12} md={12} sm={12}>
                        <Jumbotron style={{backgroundColor:'#fff'}}>
                            <h1>Hello, world!</h1>
                            <h3>真诚的面对，难道这也是错？</h3>
                            <h5>2012年毕业于辽宁师范大学-数学学院-信息与计算科学专业，毕业后从事Web开发行业</h5>
                            <h5>有近3年的Java WEb开发经验，后主要从事前端工作，该网站的目的是记录和分享工作经验，学习的知识以及生活杂谈。</h5>
                            <h5>本页面通过ReactJS + Bootstrap开发实现。PS.小网站资源有限，请爱护。</h5>
                        </Jumbotron>
                    </Col>
                </Row>

                <Row className="show-grid">
                    <Col lg={3} xs={3} md={3} smHidden>
                        <div style={{border:'1px solid #ccc',borderRadius:'5px',padding:'20px'}}>
                            <span style={{fontSize:'20px',fontWeight:'bolder'}}>目录：</span>
                            <ListGroup>
                                <ListGroupItem ref="listItem1" data-value="123" href="javascript:;"active={true} onClick={this.listItemClick}>Link 1</ListGroupItem>
                                <ListGroupItem ref="listItem2" href="javascript:;" onClick={this.listItemClick}>Link 2</ListGroupItem>
                                <ListGroupItem ref="listItem3" href="javascript:;" onClick={this.listItemClick}>Link 3</ListGroupItem>
                            </ListGroup>
                        </div>
                    </Col>
                    <Col lg={9} xs={9} md={9} sm={12}>
                        <div style={{border:'1px solid #ccc',borderRadius:'5px',padding:'20px'}}>
                            123
                        </div>
                    </Col>
                </Row>

            </Grid>
        );
    }
}
ReactDOM.render(
    <Main />,
    document.getElementById('contion')
);

ReactDOM.render(
    <Media />,
    document.getElementById('media')
);